import qs from 'qs';
import * as echarts from 'echarts';
import { useRoute } from "vue-router";
import { ref, onMounted, onBeforeUnmount, nextTick, reactive } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import {
  ProProtectionGetInsureCount,
  PersonalcreditreportGetCreditStatistics,
  SecuritiesPropertyConfigGetMonitorCneterData,
  DataProcessTaskGetBigDataProcessingStatistics,
  ApplyPaymentSettlementGetSettlementStatistics,
  PlatformMonitorCenterBankAndSuperviseMonitorInfo,
  ProductInStockGetQuantityStatisticsPurchasedProducts,
  ProductInStockGetBigDataFinancialFinancingAmountStatistics,//
  SupplierEnterpriseInfoGetDataFinancialSupplyChainBusinessInformation
} from "@/api/stu/controlcenter";

export function useHooks() {
  const CharMOdel = ref();//车险定价模型
  const CustomerBase = ref();//客户群
  const IsUnmount = ref<boolean>(true); // 退出页面数据刷新
  const route = useRoute();
  let ZXData = reactive({
    enterpriseCreditRatingModelCount: 0,
    enterpriseCreditReportCount: 0,
    personalCreditRatingModelCount: 0,
    personalCreditReportCount: 0
  });
  async function Insurancebigdata() {
    const res = await ProProtectionGetInsureCount();
    const { one, two, three, four, five, six } = res?.data;
    if (res.success) {
      tomr_r1_1(one)
      tomr_r1_2(two)
      tomr_r1_3(three)
      tomr_r2(four)
      nextTick(() => {
        CharMOdel.value = five[0]?.value || 0
        CustomerBase.value = five[1]?.value || 0
      });
    } else {
      ElMessage.error(res.msg)
    }
  }

  // 银行大数据
  async function PlatformMonitorCenter() {
    const res = await PlatformMonitorCenterBankAndSuperviseMonitorInfo();
    const { approvalModel, collectionStrategy, precisionPush, strategyAndModel } = res?.data;
    if (res.success) {
      btmrr1_top_box(approvalModel);
      btmrr1_tom(collectionStrategy);
      btmr_r3(precisionPush);
      cl_model(strategyAndModel)
    } else {
      ElMessage.error(res.msg)
    }
  }

  // 证券大数据
  async function SecuritiesProperty() {
    const res = await SecuritiesPropertyConfigGetMonitorCneterData();
    // console.log("res", res)
    const { allocationPlanDatas, countDatas, moneryDatas, portfolioDatas } = res?.data
    if (res.success) {
      zqboxle_top(countDatas);
      zqboxle_btm(moneryDatas);
      zqboxpie_top(allocationPlanDatas)
      zqboxlepie_btm(portfolioDatas)
    } else {
      ElMessage.error(res.msg)
    }
  }

  // 征信大数据
  // PersonalcreditreportGetCreditStatistics
  async function GetCreditStatistics() {
    const res = await PersonalcreditreportGetCreditStatistics()
    if (res.success) {
      const {
        enterpriseCreditRatingModelCount,
        enterpriseCreditReportCount,
        personalCreditRatingModelCount,
        personalCreditReportCount
      } = res?.data;
      ZXData.enterpriseCreditRatingModelCount = enterpriseCreditRatingModelCount
      ZXData.enterpriseCreditReportCount = enterpriseCreditReportCount
      ZXData.personalCreditRatingModelCount = personalCreditRatingModelCount
      ZXData.personalCreditReportCount = personalCreditReportCount
    } else {
      ElMessage.error(res.msg)
    }
  }

  // 大数据处理
  // DataProcessTaskGetBigDataProcessingStatistics
  async function GetBigDataProcessingStatistics() {
    const res = await DataProcessTaskGetBigDataProcessingStatistics()
    if (res.success) {
      big_cjwj(res?.data?.captureFileQuantity)
      big_bottombie(res?.data?.datapreprocessChartStatistics)
    } else {
      ElMessage.error(res.msg)
    }
  }


  // 大数据供应链
  async function GetSupplyChainBusinessInformation() {
    const res = await SupplierEnterpriseInfoGetDataFinancialSupplyChainBusinessInformation()
    if (res.success) {
      biggyl__1(res?.data)
    } else {
      ElMessage.error(res.msg)
    }
  }

  async function GetAmountStatistics() {
    const res = await ProductInStockGetBigDataFinancialFinancingAmountStatistics()
    if (res.success) {
      biggyl__41(res?.data)
      biggyl__42(res?.data)
    } else {
      ElMessage.error(res.msg)
    }
  }

  async function GetQuantityStatisticsPurchasedProducts() {
    const res = await ProductInStockGetQuantityStatisticsPurchasedProducts()
    if (res.success) {
      biggyl__3(res?.data)
    } else {
      ElMessage.error(res.msg)
    }
  }


  async function GetSettlementStatistics() {
    const res = await ApplyPaymentSettlementGetSettlementStatistics()
    if (res.success) {
      biggyl__2(res?.data)
    } else {
      ElMessage.error(res.msg)
    }
  }


  // 策略与模型
  function cl_model(row) {
    const myChart = echarts.init(document.getElementById('cl_model'));
    const dataAxis = row.name;
    const data = row.value;
    const option = {
      title: [
        {
          text: '单位:数量',
          left: '1%',
          top: '2%',
          textStyle: {
            fontSize: 12,
            color: '#333333',
            fontWeight: 500,
          },
        },
        {
          text: '策略与模型',
          left: '40%',
          top: '1%',
          textStyle: {
            fontSize: 18,
            color: '#333',
            fontWeight: 'bold',
          },
        }
      ],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '0%',
        top: '20%',
        containLabel: true
      },
      xAxis: {
        data: dataAxis,
        axisLabel: {
          inside: false,
          color: '#333',
          interval: 0,
          formatter: function (value) {
            let ret = "";//拼接加\n返回的类目项
            let maxLength = 5;//每项显示文字个数
            let valLength = value.length;//X轴类目项的文字个数
            let rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
            if (rowN > 1)//如果类目项的文字大于3,
            {
              for (let i = 0; i < rowN; i++) {
                let temp = "";//每次截取的字符串
                let start = i * maxLength;//开始截取的位置
                let end = start + maxLength;//结束截取的位置
                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                temp = value.substring(start, end) + "\n";
                ret += temp; //凭借最终的字符串
              }
              return ret;
            }
            else {
              return value;
            }
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        }
      },
      yAxis: {
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#999'
        }
      },
      series: [
        {
          type: 'bar',
          itemStyle: {
            barBorderRadius: [15, 15, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 1, color: '#58bce14a' },
              { offset: 0.5, color: '#58bce19c' },
              { offset: 0, color: '#58BCE1' }
            ])
          },
          barWidth: 25,
          data: data
        }
      ]
    };

    myChart.setOption(option);
    window.addEventListener('resize', function () {
      myChart.resize();
    }, false);
  }

  // 大数据处理 -- 饼图
  function big_bottombie(data) {
    let datas = [];
    data.forEach(el => {
      switch (el.type) {
        case 1:
          datas.push({
            "name": "堆积型柱状图", "value": el.count
          })
          break;
        case 2:
          datas.push({
            "name": "多系列柱形图", "value": el.count
          })
          break;
        case 3:
          datas.push({
            "name": "对比柱形图", "value": el.count
          })
          break;
        case 4:
          datas.push({
            "name": "多系列折线图", "value": el.count
          })
          break;
        case 5:
          datas.push({
            "name": "折线雷达图", "value": el.count
          })
          break;
        case 6:
          datas.push({
            "name": "范围面积图", "value": el.count
          })
          break;
        case 7:
          datas.push({
            "name": "饼状图", "value": el.count
          })
          break;
        case 8:
          datas.push({
            "name": "玫瑰图", "value": el.count
          })
          break;
        case 9:
          datas.push({
            "name": "散点图", "value": el.count
          })
          break;
        case 10:
          datas.push({
            "name": "气泡图", "value": el.count
          })
          break;
      }
    });
    if (!datas.length) {
      datas = [
        { "name": "堆积型柱状图", "value": 0 },
        { "name": "多系列柱形图", "value": 0 },
        { "name": "对比柱形图", "value": 0 },
        { "name": "多系列折线图", "value": 0 },
        { "name": "折线雷达图", "value": 0 },
        { "name": "范围面积图", "value": 0 },
        { "name": "饼状图", "value": 0 },
        { "name": "玫瑰图", "value": 0 },
        { "name": "散点图", "value": 0 },
        { "name": "气泡图", "value": 0 }
      ]
    }
    const myChart = echarts.init(document.getElementById('big_bottombie'));
    const option = {
      backgroundColor: '#fff',
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '55%',
        left: 'center'
      },
      series: [
        {
          name: '',
          type: 'pie',
          radius: ['30%', '50%'],
          center: ['50%', '30%', '50%', '50%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 5,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            formatter: '{b}：{d}%', // 用来换行
          },
          emphasis: {
            label: {
              show: false,
              fontSize: 20,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: datas
        }
      ]
    };
    myChart.setOption(option);
    window.addEventListener('resize', function () {
      myChart.resize();
    }, false);
  }
  // 大数据处理 -- 进度条
  function big_cjwj(data) {
    const myChart = echarts.init(document.getElementById('big_cjwj'));
    const bgImg = new URL("@/assets/studen/images/monit_dowload1.png", import.meta.url).href
    const fillImg = new URL("@/assets/studen/images/monit_dowload2.png", import.meta.url).href
    const barname = ['']
    const data1 = [data];
    let data1Max = 100;
    const data2 = [];
    const bgdata = [];
    // 所有数据最大值
    for (var i = 0; i < data1.length; i++) {
      bgdata[i] = data1Max;
      if (data1Max === 0) {
        data2.push(80);
      } else {
        data2.push(data1Max * 1);
      }
    }
    const option = {
      grid: {
        left: "1%",
        top: "5%",
        bottom: "3%",
        right: "25%",
        // containLabel: true,
        height: "85%",
        // width: "60%"
      },
      legend: {
        show: false
      },
      tooltip: {
        show: true,
        trigger: "axis",
        formatter: "{b}",
        axisPointer: {
          type: 'none'
        },
        confine: true,
      },
      xAxis: {
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: false
        }
      },
      yAxis: {
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          color: "#bee3fd",
          fontSize: 22,
          margin: 120,
          interval: 0,
          align: 'left',
          formatter: (c) => {
            if (c.length > 6) {
              return c.replace(/.{6}(?!$)/g, (a) => a + '\n')
            } else {
              return c;
            }
          }
        },
        data: barname
      },
      series: [
        //背景
        {
          name: "bg",
          type: "pictorialBar",
          barWidth: "20",
          silent: true,
          barCategoryGap: 100,
          symbol: "image://" + bgImg,
          symbolClip: false,
          symbolBoundingData: 100,
          symbolSize: ["100%", "100%"],
          data: bgdata
        },
        {
          name: "数据",
          type: "pictorialBar",
          barWidth: "20",
          barGap: "-100%",
          data: data1,
          z: 3,
          symbol: "image://" + fillImg,
          symbolClip: true,
          barCategoryGap: 100,
          symbolBoundingData: 100,
          symbolSize: ["100%", "100%"],
          label: {
            normal: {
              show: true,
              position: "right",
              fontSize: 16,
              color: "#333",
              offset: [10, 0],
              formatter: function (params) {
                return data1[params.dataIndex] === 0 ?
                  "0" :
                  data1[params.dataIndex] + "%";
              }
            }
          },
        }
      ]
    };
    myChart.setOption(option);
    window.addEventListener('resize', function () {
      myChart.resize();
    }, false);
  }

  // 证券大数据 --左上角
  function zqboxle_top(data) {
    const myChart = echarts.init(document.getElementById('zqboxle_top'));
    const option = {
      title: [
        {
          text: '单位:数量',
          right: '5%',
          top: '2%',
          textStyle: {
            fontSize: 12,
            color: '#333333',
            fontWeight: 500,
          },
        }
      ],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '10%',
        bottom: '0%',
        top: '15%',
        containLabel: true
      },
      yAxis: {
        type: 'category',
        axisLabel: {
          interval: 0,
          formatter: function (value) {
            let ret = "";//拼接加\n返回的类目项
            let maxLength = 5;//每项显示文字个数
            let valLength = value.length;//X轴类目项的文字个数
            let rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
            if (rowN > 1)//如果类目项的文字大于3,
            {
              for (let i = 0; i < rowN; i++) {
                let temp = "";//每次截取的字符串
                let start = i * maxLength;//开始截取的位置
                let end = start + maxLength;//结束截取的位置
                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                temp = value.substring(start, end) + "\n";
                ret += temp; //凭借最终的字符串
              }
              return ret;
            }
            else {
              return value;
            }
          }
        },
        data: data.map(i => i.name)
      },
      xAxis: {
        show: false,
        name: '单位：元',
        type: 'value'
      },
      series: [
        {
          data: data.map(i => i.value),
          type: 'bar',
          barMaxWidth: '15',
          showBackground: true,
          label: {
            show: true,
            position: 'right',
            distance: 5,
            valueAnimation: true,
            formatter: (value) => {
              return value.data
            },
          },
          itemStyle: {
            barBorderRadius: [15, 15, 15, 15],
            color: "#4F82D5"
          }
        }
      ]
    };
    myChart.setOption(option);
    window.addEventListener('resize', function () {
      myChart.resize();
    }, false);
  }
  // 证券大数据 --左下角
  function zqboxle_btm(data) {
    const myChart = echarts.init(document.getElementById('zqboxle_btm'));
    const option = {
      title: [
        {
          text: '单位:元',
          left: '0%',
          top: '2%',
          textStyle: {
            fontSize: 12,
            color: '#333333',
            fontWeight: 500,
          },
        }
      ],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '0%',
        top: '20%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        axisLabel: {
          interval: 0,
          formatter: function (value) {
            let ret = "";//拼接加\n返回的类目项
            let maxLength = 4;//每项显示文字个数
            let valLength = value.length;//X轴类目项的文字个数
            let rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
            if (rowN > 1)//如果类目项的文字大于3,
            {
              for (let i = 0; i < rowN; i++) {
                let temp = "";//每次截取的字符串
                let start = i * maxLength;//开始截取的位置
                let end = start + maxLength;//结束截取的位置
                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                temp = value.substring(start, end) + "\n";
                ret += temp; //凭借最终的字符串
              }
              return ret;
            }
            else {
              return value;
            }
          }
        },
        data: data.map(i => i.name)
      },
      yAxis: {
        show: true,
        name: '',
        type: 'value'
      },
      series: [
        {
          data: data.map(i => i.value),
          type: 'bar',
          barMaxWidth: '20',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 1, color: '#024ded40' },
              { offset: 0.5, color: '#024ded96' },
              { offset: 0, color: '#024DED' }
            ])
          }
        }
      ]
    };
    myChart.setOption(option);
    window.addEventListener('resize', function () {
      myChart.resize();
    }, false);
  }

  // 证券大数据 --右上角
  function zqboxpie_top(data) {
    const myChart = echarts.init(document.getElementById('zqboxpie_top'));
    const color = ['#56ADFF', '#F59A8B', '#FEDE50', '#88D0BC', '#007AED'];
    const option = {
      title: {
        text: '资产配置\n\r\r方案',
        // padding: [63, 0, 0, 77], //可改标题位置
        textAlign: 'center',
        left: '46.5%',
        top: '42%',
        textStyle: {
          fontWeight: 'normal',
          color: '#000',
          fontSize: 11,
        },
      },
      tooltip: {
        show: true,
      },
      series: [
        {
          type: 'pie',
          radius: ['35%', '55%'],
          center: ['50%', '50%'],
          hoverAnimation: true,
          z: 10,
          color: color,
          itemStyle: {
            normal: {
              borderWidth: 5,
            },
          },
          data: data,
          label: {
            formatter: function (params) {
              return `{normal|${params.name}：\n${params.percent}%}`
            },
            rich: {
              normal: {
                fontSize: 10,
                align: "left"
              },
              value: {
                fontSize: 10,
              }
            }
          },
          labelLine: {
            show: true,
            normal: {
              length: 5,
              length2: 2,
              lineStyle: {
                width: 1,
              },
            },
          },
        },
      ],
    };

    myChart.setOption(option);
    window.addEventListener('resize', function () {
      myChart.resize();
    }, false);
  }
  // 证券大数据 --右下角
  function zqboxlepie_btm(data) {
    const myChart = echarts.init(document.getElementById('zqboxlepie_btm'));
    const color = ['#6E6DAB', '#94BCF9', '#CAE5F8', '#F9CB98', '#F3705B'];
    const option = {
      title: {
        text: '投资组合',
        // padding: [70, 0, 0, 77], //可改标题位置
        textAlign: 'center',
        left: '46.5%',
        top: '42%',
        textStyle: {
          fontWeight: 'normal',
          color: '#000',
          fontSize: 11,
        },
      },
      tooltip: {
        show: true,
      },
      series: [
        {
          type: 'pie',
          radius: ['35%', '55%'],
          center: ['50%', '50%'],
          hoverAnimation: true,
          z: 10,
          color: color,
          itemStyle: {
            normal: {
              borderWidth: 5,
            },
          },
          data: data,
          label: {
            formatter: function (params) {
              return `{normal|${params.name}：\n${params.percent}%}`
            },
            rich: {
              normal: {
                fontSize: 10,
                align: "left"
              },
              value: {
                fontSize: 10,
              }
            }
          },
          labelLine: {
            show: true,
            normal: {
              length: 5,
              length2: 2,
              lineStyle: {
                width: 1,
              },
            },
          },
        },
      ],
    };

    myChart.setOption(option);
    window.addEventListener('resize', function () {
      myChart.resize();
    }, false);
  }

  // 大数据供应链金融 左上角
  function biggyl__1(datas) {
    const data = [
      { name: '供应商企业数量', value: datas.numberSupplierEnterprises || 0 },
      { name: '采购订单数量', value: datas.purchaseCount || 0 },
      { name: '评级模型数量', value: datas.creditRatingModelCount || 0 },
      { name: '融资额度计算模型数量', value: datas.ratedVerificationModelCount || 0 },
      { name: '组建资产池数量', value: datas.assetPoolCount || 0 }
    ]
    const myChart = echarts.init(document.getElementById('biggyl__1'));
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '0%',
        top: '20%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        axisLabel: {
          interval: 0,
          formatter: function (value) {
            let ret = "";//拼接加\n返回的类目项
            let maxLength = 4;//每项显示文字个数
            let valLength = value.length;//X轴类目项的文字个数
            let rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
            if (rowN > 1)//如果类目项的文字大于3,
            {
              for (let i = 0; i < rowN; i++) {
                let temp = "";//每次截取的字符串
                let start = i * maxLength;//开始截取的位置
                let end = start + maxLength;//结束截取的位置
                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                temp = value.substring(start, end) + "\n";
                ret += temp; //凭借最终的字符串
              }
              return ret;
            }
            else {
              return value;
            }
          }
        },
        data: data.map(i => i.name)
      },
      yAxis: {
        name: '单位：个',
        type: 'value'
      },
      series: [
        {
          data: data.map(i => i.value),
          type: 'bar',
          barMaxWidth: '15',

          itemStyle: {
            barBorderRadius: [15, 15, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 1, color: '#ECE8FF' },
              { offset: 0.5, color: '#694ED6' },
              { offset: 0, color: '#694ED6' }
            ])
          }
        }
      ]
    };
    myChart.setOption(option);
    window.addEventListener('resize', function () {
      myChart.resize();
    }, false);
  }
  // 大数据供应链金融 右上角
  function biggyl__2(datas) {
    const data1 = datas.supplyChainSettlement * 100;
    const data2 = datas.onlineSettlement * 100;
    const myChart = echarts.init(document.getElementById('biggyl__2'));
    const option = {
      series: [
        {
          name: '',
          type: 'pie',
          zlevel: 2,
          radius: ['27%', '35%'],
          center: ['50%', '50%'],
          color: [
            '#E38D27',
            '#19DF5F',
          ],
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          tooltip: {
            show: false,
          },
          data: [
            {
              value: data1,
              name: '',
            },
            {
              value: data2,
              name: '',
            },
          ],
        },
        {
          name: 'title',
          type: 'pie',
          zlevel: 3,
          hoverAnimation: false,
          legendHoverLink: false,
          radius: ['33%', '43%'],
          center: ['50%', '50%'],
          color: [
            '#FFBA69',
            '#05AE41',
          ],
          label: {
            show: true,
            // formatter: '{bb|{b}:}{cc|{c}}\n{dd|{d}%}',
            formatter: '{bb|{b}:}\n{dd|{d}%}',
            rich: {
              bb: {
                height: 200,
                align: "left",
                fontSize: 12
              },
              cc: {
                height: 300,
                align: "left",
                fontSize: 12
              }
            },
            padding: [0, -5],
            textStyle: {
              lineHeight: 20
            }
          },
          labelLine: {
            show: true,
            // showAbove:true,
            length: 5,
            length2: 5,

          },
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.3)',
          },
          data: [
            {
              value: data1,
              name: '供应链\n金融结算',
              label: {
                color: '#E38D27',
              },
            },
            {
              value: data2,
              name: '线上结算',
              label: {
                color: '#05AE41',
              },
            },
          ],
        },
      ],
    };

    myChart.setOption(option);
    window.addEventListener('resize', function () {
      myChart.resize();
    }, false);
  }

  // 大数据供应链金融 左下角
  function biggyl__3(datas) {
    const fillImg = new URL("@/assets/studen/images/biggyl__3zhi.png", import.meta.url).href
    const bgImg = new URL("@/assets/studen/images/biggyl__3di.png", import.meta.url).href
    const minArray = [
      datas.numberSmartphones,
      datas.notebookCount,
      datas.mouseCount,
      datas.printerCount,
      datas.displayCount,
      datas.keyboardCount];
    let xaxisData = [
      '智能手机',
      '笔记本电脑',
      '鼠标',
      '打印机',
      '显示器',
      '键盘'
    ];
    const myChart = echarts.init(document.getElementById('biggyl__3'));
    const option = {
      title: [
        {
          text: '单位：件',
          top: '3%',
          left: '3%',
          textStyle: {
            fontSize: '12px',
            fontWeight: 500,
            color: '#333',
          }
        },
        {
          text: '采购产品数量',
          top: '2%',
          left: '37%',
          textStyle: {
            fontSize: '16px',
            fontWeight: 600,
            color: '#333',
          }
        }
      ]
      ,
      tooltip: {
        valueFormatter: function (value) {
          return value;
        }
      },
      grid: {
        left: '1%',
        right: '0%',
        top: '16%',
        bottom: '5%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: xaxisData,
        axisLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: '#545454'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#B5C5D4',
          fontSize: '10px',
          interval: 0
        }
      },
      yAxis: [
        {
          type: 'value',
          min: 0,
          axisLine: {
            show: false,
            lineStyle: {
              width: 1,
              color: '#545454'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#B2C2D3',
              opacity: 0.3,
              type: 'dotted'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#B5C5D4',
            fontSize: '12px',
            formatter: (value) => {
              return value
            }
          }
        }
      ],
      series: [
        //背景
        {
          name: "bg",
          type: "pictorialBar",
          barWidth: "30",
          silent: true,
          barCategoryGap: 200,
          symbol: "image://" + bgImg,
          symbolClip: false,
          symbolBoundingData: Math.max(...minArray) || 1,
          symbolSize: ["100%", "100%"],
          data: minArray
        },
        {
          name: "数据",
          type: "pictorialBar",
          barWidth: "30",
          barGap: "-100%",
          data: minArray,
          z: 3,
          symbol: "image://" + fillImg,
          symbolClip: true,
          barCategoryGap: 5000,
          symbolBoundingData: Math.max(...minArray),// 数据颜色
          symbolSize: ["100%", "100%"],
          label: {
            normal: {
              show: false,
              position: "right",
              fontSize: 16,
              color: "#333",
              offset: [10, 0],
              formatter: function (params) {
                return minArray[params.dataIndex] === 0 ?
                  "0" :
                  minArray[params.dataIndex] + "%";
              }
            }
          },
        }
      ]
    };
    myChart.setOption(option);
    window.addEventListener('resize', function () {
      myChart.resize();
    }, false);
  }
  // 右下角
  function biggyl__41(datas) {
    const data = [datas.purchaseOrderAmount]
    const title = ['']
    const myChart = echarts.init(document.getElementById('biggyl__4_1'));
    const option = {
      tooltip: {
        trigger: 'item',
      },
      grid: {
        left: '5%',
        top: '20%',
        right: '5%',
        bottom: '10%',
      },
      xAxis: [{
        data: title,
        axisLabel: {
          textStyle: {
            color: "#333",
            fontSize: 14
          },
          margin: 15, //刻度标签与轴线之间的距离。
        },

        axisLine: {
          show: false, //不显示x轴
          lineStyle: {
            color: 'rgba(53,65,95,1)',
          }
        },
        axisTick: {
          show: false //不显示刻度
        },
        boundaryGap: true,
        splitLine: {
          show: false
        }
      }],
      yAxis: [{
        name: "采购订单总金额",
        position: "top",
        offset: 0,
        nameLocation: 'center',
        nameTextStyle: {
          color: "#333",
          fontSize: 12,
          // fontWeight: "bold",
          padding: [0, -10, 0, 0]
        },
        nameGap: -20,
        splitLine: {
          show: false,
          lineStyle: {
            color: 'rgba(53,65,95,1)',
            type: 'dashed'
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          textStyle: {
            color: 'rgba(122,173,212,1)',
            fontSize: 14
          },
        }
      }],
      series: [
        {//柱底圆片
          name: "",
          type: "pictorialBar",
          symbolSize: [35, 20],//调整截面形状
          symbolOffset: [0, 10],
          z: 12,
          itemStyle: {
            "normal": {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: "#6692fc"
              },
              {
                offset: 1,
                color: "#235af7"
              }
              ], false)
            }
          },
          data: data
        },

        //柱体
        {
          name: '',
          type: 'bar',
          barWidth: 35,
          itemStyle: {
            // shadowOffsetX: 200,
            // shadowOffsetY: 200,
            "normal": {
              "color": {
                "x": 0,
                "y": 0,
                "x2": 0,
                "y2": 1,
                "type": "linear",
                "global": false,
                "colorStops": [{//第一节下面
                  "offset": 0,
                  "color": "#6692fc"
                }, {
                  "offset": 1,
                  "color": "#235af7"
                }]
              }
            }
          },
          data: data
        },

        //柱顶圆片
        {
          name: "",
          type: "pictorialBar",
          symbolSize: [35, 21],//调整截面形状
          symbolOffset: [0, -10],
          z: 12,
          symbolPosition: "end",
          "itemStyle": {
            "normal": {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                [{
                  offset: 0,
                  color: "#6692fc"
                },
                {
                  offset: 1,
                  color: "#235af7"
                }],
                false
              ),
            }
          },
          // 头顶文字
          label: {
            show: true,
            position: 'top',
            fontSize: 12,
            formatter: '{c}' + '万元',
            valueAnimation: true
          },
          data: data
        }
      ]
    }
    myChart.setOption(option);
    window.addEventListener('resize', function () {
      myChart.resize();
    }, false);
  }
  function biggyl__42(datas) {
    const data = [datas.enterpriseFinancingAmount]
    const title = ['']
    const myChart = echarts.init(document.getElementById('biggyl__4_2'));
    const option = {
      tooltip: {
        trigger: 'item',
      },
      grid: {
        left: '5%',
        top: '20%',
        right: '5%',
        bottom: '10%',
      },
      xAxis: [{
        data: title,
        axisLabel: {
          textStyle: {
            color: "#333",
            fontSize: 14
          },
          margin: 15, //刻度标签与轴线之间的距离。
        },

        axisLine: {
          show: false, //不显示x轴
          lineStyle: {
            color: 'rgba(53,65,95,1)',
          }
        },
        axisTick: {
          show: false //不显示刻度
        },
        boundaryGap: true,
        splitLine: {
          show: false
        }
      }],
      yAxis: [{
        name: "企业融资金额累计",
        position: "right",
        offset: 0,
        nameLocation: 'center',
        nameTextStyle: {
          color: "#333",
          fontSize: 12,
          // fontWeight: "bold",
          padding: [0, -10, 0, 0]
        },
        nameGap: -15,
        splitLine: {
          show: false,
          lineStyle: {
            color: 'rgba(53,65,95,1)',
            type: 'dashed'
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          textStyle: {
            color: 'rgba(122,173,212,1)',
            fontSize: 14
          },
        }
      }],
      series: [
        {//柱底圆片
          name: "",
          type: "pictorialBar",
          symbolSize: [35, 20],//调整截面形状
          symbolOffset: [0, 10],
          z: 12,
          itemStyle: {
            "normal": {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: "#ffe17d"
              },
              {
                offset: 1,
                color: "#ffd136"
              }
              ], false)
            }
          },
          data: data
        },

        //柱体
        {
          name: '',
          type: 'bar',
          barWidth: 35,
          itemStyle: {
            // shadowOffsetX: 200,
            // shadowOffsetY: 200,
            "normal": {
              "color": {
                "x": 0,
                "y": 0,
                "x2": 0,
                "y2": 1,
                "type": "linear",
                "global": false,
                "colorStops": [{//第一节下面
                  offset: 0,
                  color: "#ffe17d"
                },
                {
                  offset: 1,
                  color: "#ffd136"
                }]
              }
            }
          },
          data: data
        },

        //柱顶圆片
        {
          name: "",
          type: "pictorialBar",
          symbolSize: [35, 21],//调整截面形状
          symbolOffset: [0, -10],
          z: 12,
          symbolPosition: "end",
          "itemStyle": {
            "normal": {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                [{
                  offset: 0,
                  color: "#ffe17d"
                },
                {
                  offset: 1,
                  color: "#ffd136"
                }],
                false
              ),
            }
          },
          // 头顶文字
          label: {
            show: true,
            position: 'top',
            fontSize: 12,
            formatter: '{c}' + '万元',
            valueAnimation: true
          },
          data: data
        }
      ]
    }
    myChart.setOption(option);
    window.addEventListener('resize', function () {
      myChart.resize();
    }, false);
  }

  // 保险大数据 --左 1
  function tomr_r1_1(data) {
    const myChart = echarts.init(document.getElementById('tomr_r1_1'));
    const color = ['#3751FE', '#7C8DFF', '#19C135'];
    const option = {
      title: {
        text: '保险产品',
        // padding: ['10%', 0, 0, 65], //可改标题位置
        textAlign: 'center',
        left: '46.5%',
        top: '46%',
        textStyle: {
          fontWeight: 'normal',
          color: '#000',
          fontSize: 11,
        },
      },
      tooltip: {
        show: true,
      },
      series: [
        {
          type: 'pie',
          radius: ['45%', '70%'],
          center: ['50%', '50%'],
          hoverAnimation: true,
          z: 10,
          color: color,
          itemStyle: {
            normal: {
              borderWidth: 5,
            },
          },
          data: data,
          label: {
            show: false,
            formatter: function (params) {
              return `{normal|${params.name}：\n${params.percent}%}`
            },
            rich: {
              normal: {
                fontSize: 10,
                align: "left"
              },
              value: {
                fontSize: 10,
              }
            }
          },
          labelLine: {
            show: true,
            normal: {
              length: 5,
              length2: 2,
              lineStyle: {
                width: 1,
              },
            },
          },
        },
      ],
    };

    myChart.setOption(option);
    window.addEventListener('resize', function () {
      myChart.resize();
    }, false);
  }

  // 保险大数据 --左 2
  function tomr_r1_2(data) {
    const myChart = echarts.init(document.getElementById('tomr_r1_2'));
    const color = ['#FF605A', '#65D1FF', '#FF9D56', '#FFE689'];
    const option = {
      title: {
        text: '核保结果',
        // padding: ['10%', 0, 0, 65], //可改标题位置
        textAlign: 'center',
        left: '46.5%',
        top: '46%',
        textStyle: {
          fontWeight: 'normal',
          color: '#000',
          fontSize: 11,
        },
      },
      tooltip: {
        show: true,
      },
      series: [
        {
          type: 'pie',
          radius: ['45%', '70%'],
          center: ['50%', '50%'],
          hoverAnimation: true,
          z: 10,
          color: color,
          itemStyle: {
            normal: {
              borderWidth: 5,
            },
          },
          data: data,
          label: {
            show: false,
            formatter: function (params) {
              return `{normal|${params.name}：\n${params.percent}%}`
            },
            rich: {
              normal: {
                fontSize: 10,
                align: "left"
              },
              value: {
                fontSize: 10,
              }
            }
          },
          labelLine: {
            show: true,
            normal: {
              length: 5,
              length2: 2,
              lineStyle: {
                width: 1,
              },
            },
          },
        },
      ],
    };

    myChart.setOption(option);
    window.addEventListener('resize', function () {
      myChart.resize();
    }, false);
  }

  // 保险大数据 --左 3
  function tomr_r1_3(data) {
    const myChart = echarts.init(document.getElementById('tomr_r1_3'));
    const color = ['#1A83E6', '#5DBE89'];
    const option = {
      title: {
        text: '投保决策',
        // padding: ['10%', 0, 0, 65], //可改标题位置
        textAlign: 'center',
        left: '46.5%',
        top: '46%',
        textStyle: {
          fontWeight: 'normal',
          color: '#000',
          fontSize: 11,
        },
      },
      tooltip: {
        show: true,
      },
      series: [
        {
          type: 'pie',
          radius: ['45%', '70%'],
          center: ['50%', '50%'],
          hoverAnimation: true,
          z: 10,
          color: color,
          itemStyle: {
            normal: {
              borderWidth: 5,
            },
          },
          data: data,
          label: {
            show: false,
            formatter: function (params) {
              return `{normal|${params.name}：\n${params.percent}%}`
            },
            rich: {
              normal: {
                fontSize: 10,
                align: "left"
              },
              value: {
                fontSize: 10,
              }
            }
          },
          labelLine: {
            show: true,
            normal: {
              length: 5,
              length2: 2,
              lineStyle: {
                width: 1,
              },
            },
          },
        },
      ],
    };

    myChart.setOption(option);
    window.addEventListener('resize', function () {
      myChart.resize();
    }, false);
  }

  // 保险大数据 -- 中间 风控模型
  function tomr_r2(datas) {
    // const row = {
    //   name: ['车险', '健康险', '意外险'],
    //   value: [88, 99, 199]
    // }
    const myChart = echarts.init(document.getElementById('tomr_r2'));
    const dataAxis = datas.name;
    const data = datas.value;
    const option = {
      title: [
        {
          text: '单位:数量',
          left: '1%',
          top: '2%',
          textStyle: {
            fontSize: 12,
            color: '#333333',
            fontWeight: 500,
          },
        },
        {
          text: '风控模型',
          left: '40%',
          top: '1%',
          textStyle: {
            fontSize: 18,
            color: '#333',
            fontWeight: 'bold',
          },
        }
      ],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '0%',
        top: '20%',
        containLabel: true
      },
      xAxis: {
        data: dataAxis,
        axisLabel: {
          inside: false,
          color: '#333',
          interval: 0,
          formatter: function (value) {
            let ret = "";//拼接加\n返回的类目项
            let maxLength = 6;//每项显示文字个数
            let valLength = value.length;//X轴类目项的文字个数
            let rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
            if (rowN > 1)//如果类目项的文字大于3,
            {
              for (let i = 0; i < rowN; i++) {
                let temp = "";//每次截取的字符串
                let start = i * maxLength;//开始截取的位置
                let end = start + maxLength;//结束截取的位置
                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                temp = value.substring(start, end) + "\n";
                ret += temp; //凭借最终的字符串
              }
              return ret;
            }
            else {
              return value;
            }
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        }
      },
      yAxis: {
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#999'
        }
      },
      series: [
        {
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: '#DCF3E6',
            barBorderRadius: [15, 15, 0, 0],
          },
          itemStyle: {
            barBorderRadius: [15, 15, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 1, color: '#19C135' },
              { offset: 0.5, color: '#19C135' },
              { offset: 0, color: '#19C135' }
            ])
          },
          barWidth: 20,
          data: data
        }
      ]
    };

    myChart.setOption(option);
    window.addEventListener('resize', function () {
      myChart.resize();
    }, false);
  }
  // 银行大数据左一
  function btmrr1_top_box(row) {
    // const row = {
    //   name: ['消费贷', '信用卡', '小微经营贷', '抵押贷'],
    //   value: [88, 99, 199, 188]
    // }
    const myChart = echarts.init(document.getElementById('btmrr1_top_box'));
    const dataAxis = row.name;
    const data = row.value;
    const option = {
      title: [
        {
          text: '单位:数量',
          left: '1%',
          top: '2%',
          textStyle: {
            fontSize: 12,
            color: '#333333',
            fontWeight: 500,
          },
        },
        {
          text: '审批策略产品类型',
          left: '40%',
          top: '1%',
          textStyle: {
            fontSize: 18,
            color: '#333',
            fontWeight: 'bold',
          },
        }
      ],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '0%',
        top: '20%',
        containLabel: true
      },
      xAxis: {
        data: dataAxis,
        axisLabel: {
          inside: false,
          color: '#333',
          interval: 0,
          formatter: function (value) {
            let ret = "";//拼接加\n返回的类目项
            let maxLength = 6;//每项显示文字个数
            let valLength = value.length;//X轴类目项的文字个数
            let rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
            if (rowN > 1)//如果类目项的文字大于3,
            {
              for (let i = 0; i < rowN; i++) {
                let temp = "";//每次截取的字符串
                let start = i * maxLength;//开始截取的位置
                let end = start + maxLength;//结束截取的位置
                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                temp = value.substring(start, end) + "\n";
                ret += temp; //凭借最终的字符串
              }
              return ret;
            }
            else {
              return value;
            }
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        }
      },
      yAxis: {
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#999'
        }
      },
      series: [
        {
          type: 'bar',
          showBackground: false,
          backgroundStyle: {
            color: '#DCF3E6',
            barBorderRadius: [15, 15, 0, 0],
          },
          itemStyle: {
            barBorderRadius: [15, 15, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 1, color: '#C1E7FE' },
              { offset: 0.5, color: '#5FC9FE' },
              { offset: 0, color: '#65D1FF' }
            ])
          },
          barWidth: 20,
          data: data
        }
      ]
    };

    myChart.setOption(option);
    window.addEventListener('resize', function () {
      myChart.resize();
    }, false);
  }

  // 银行大数据 左二
  function btmrr1_tom(data) {
    const myChart = echarts.init(document.getElementById('btmrr1_tom'));
    const option = {
      title: [
        {
          text: '催收策略',
          right: '5%',
          top: '2%',
          left: "40%",
          textStyle: {
            fontSize: 16,
            color: '#333333',
            fontWeight: 600,
          },
        }
      ],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '10%',
        bottom: '0%',
        top: '15%',
        containLabel: true
      },
      yAxis: {
        type: 'category',
        axisLabel: {
          interval: 0,
          formatter: function (value) {
            let ret = "";//拼接加\n返回的类目项
            let maxLength = 6;//每项显示文字个数
            let valLength = value.length;//X轴类目项的文字个数
            let rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
            if (rowN > 1)//如果类目项的文字大于3,
            {
              for (let i = 0; i < rowN; i++) {
                let temp = "";//每次截取的字符串
                let start = i * maxLength;//开始截取的位置
                let end = start + maxLength;//结束截取的位置
                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                temp = value.substring(start, end) + "\n";
                ret += temp; //凭借最终的字符串
              }
              return ret;
            }
            else {
              return value;
            }
          }
        },
        data: data.map(i => i.name)
      },
      xAxis: {
        show: false,
        name: '单位：元',
        type: 'value'
      },
      series: [
        {
          data: data.map(i => i.value),
          type: 'bar',
          barMaxWidth: '10',
          showBackground: true,
          label: {
            show: true,
            position: 'right',
            distance: 5,
            valueAnimation: true,
            formatter: (value) => {
              return value.data
            },
          },
          itemStyle: {
            barBorderRadius: [15, 15, 15, 15],
            color: "#FD7750"
          }
        }
      ]
    };
    myChart.setOption(option);
    window.addEventListener('resize', function () {
      myChart.resize();
    }, false);
  }

  // 银行大数据 右一
  function btmr_r3(data) {
    const data_date = data.name
    const datas1 = data.value;
    const myChart = echarts.init(document.getElementById('btmr_r3'));
    const option = {
      title: [
        {
          text: '单位：个',
          top: '5%',
          left: '3%',
          bottom: "5%",
          textStyle: {
            fontSize: '12px',
            fontWeight: 500,
            color: '#333',
          }
        },
        {
          text: '精准推送',
          top: '2%',
          left: '37%',
          textStyle: {
            fontSize: '16px',
            fontWeight: 600,
            color: '#333',
          }
        }
      ],
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['']
      },
      grid: {
        left: '5%',
        right: '6%',
        bottom: '4%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: data_date
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '个数',
          type: 'line',
          data: datas1
        }
      ]
    };

    option && myChart.setOption(option);
    window.addEventListener('resize', function () {
      myChart.resize();
    }, false);
  }


  onMounted(() => {
    GetAmountStatistics()
    Insurancebigdata()
    SecuritiesProperty()
    GetCreditStatistics()
    PlatformMonitorCenter()
    GetSettlementStatistics()
    GetBigDataProcessingStatistics()
    GetSupplyChainBusinessInformation()
    GetQuantityStatisticsPurchasedProducts()

  })
  //
  onBeforeUnmount(() => {
    IsUnmount.value = false;
  })
  return {
    ZXData,
    IsUnmount,
    CharMOdel,
    CustomerBase
  }
}
